<!DOCTYPE html>
<html>
<head>
  <title>爱淘就去</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, maximum-scale=1.0"/>
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  <meta content="telephone=no" name="format-detection" />
  <link href="{G_TEMPLATES_CSS}/wx/index.css" rel="stylesheet">
  <link href="{G_TEMPLATES_CSS}/wx/comm.css" rel="stylesheet">
  <link href="{G_TEMPLATES_CSS}/wx/swiper.min.css" rel="stylesheet">
  <script src="{G_TEMPLATES_JS}/wx/jquery-2.1.4.min.js"></script>
  <script src="{G_TEMPLATES_JS}/wx/swiper.min.js"></script>
  <script type="text/javascript" src='{G_TEMPLATES_JS}/wx/jquery-ui.min.js'></script>
  <script type="text/javascript" src='{G_TEMPLATES_JS}/wx/common.js'></script>
  <style>
   body{
    background-color:#F3F3F3;
  }
</style>
</head>
<body>
  <header class="header">
   <a href="{WEB_PATH}/mobile/mobile/search">
     <div class="header-left">
      <img src="{G_TEMPLATES_IMAGE}/wx/sousuo1.png" class="sousuo">
    </div>
  </a>
  <div class="header-center">
    <span class="name">爱淘就去</span>
    <a href="#">&nbsp;|&nbsp;&nbsp;青岛
    	<img class="dingwei" src="{G_TEMPLATES_IMAGE}/wx/dingwei.png">
    </a>
  </div>
  <div class="header-right">
  	<img src="{G_TEMPLATES_IMAGE}/wx/saoma.png" class="saoma">
  </div>
</header>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <? foreach($lists as $v){ ?>
    <div class="swiper-slide"><img src="<? echo G_UPLOAD_PATH; ?>/<? echo $v['img']; ?>"></div>
    <? } ?>
  </div>
</div>
<script>
  var swiper = new Swiper('.swiper-container',{
   loop:true,
   autoplay: 3000,
   autoplayDisableOnInteraction : false,
 });
</script>
<div class="goods-fl">
  <ul>
   <li>
     <a href="{WEB_PATH}/mobile/mobile/shopclass">
      <img src="{G_TEMPLATES_IMAGE}/wx/fenlei.png" alt="img">
    </a><br />
    <span>分类</span>
  </li>
  <li>
   <a href="#">
    <img src="{G_TEMPLATES_IMAGE}/wx/liwozuijin.png" alt="img">
  </a><br />
  <span>离我最近</span>
    </li>
    <li>
     <a href="#">
      <img src="{G_TEMPLATES_IMAGE}/wx/xinshouzhinan.png" alt="img">
    </a><br />
    <span>新手指南</span>
    </li>
    <li>
     <a href="#">
      <img src="{G_TEMPLATES_IMAGE}/wx/qiandao.png" alt="img">
    </a><br />
    <span>签到</span>
    </li>
    </ul>
</div>

<div class="tuijian">
  <div class="tj-title">
   <img src="{G_TEMPLATES_IMAGE}/wx/tuijianxiushi.png" class="title-img">
   <span class="title">热门推荐</span>
   <span class="more">查看更多&nbsp;>></span>
 </div>
 
 <div class="tj-goods">
   {wc:if $new_shop}
   <a href="{WEB_PATH}/mobile/mobile/item/{wc:$new_shop['id']}">
     <div class="jx-now">
       <span class="jx-now-font">{wc:$new_shop['title']}</span><br />
       <span style="font-size:12px;color:#7A7A7A">剩余人次：{wc:$new_shop['zongrenshu']-$new_shop['canyurenshu']}</span><br />
       <img src="{G_UPLOAD_PATH}/{wc:$new_shop['thumb']}" class="jx-now-img">
     </div></a>
     {wc:if:end}  
     <div class="jx-zx">
       <div class="zx-up">
        <a href="{WEB_PATH}/mobile/mobile/item/{wc:$shoprenqi['id']}">
         <div class="zx-left">
          <span class="zx-jx-name">1元抢{wc:$shoprenqi['title']}</span><br/>
          
        </div>
        <img src="{G_UPLOAD_PATH}/{wc:$shoprenqi['thumb']}" class="zx-jx-img">
      </div></a>
      <a href="{WEB_PATH}/mobile/mobile/item/{wc:$shopEasy['id']}">
        <div class="zx-down">
         <div class="zx-left">
          
          <span class="zx-jx-name">1元抢{wc:$shopEasy['title']}</span><br/>
          <span class="zx-jx-content"></span>
        </div>
        <img src="{G_UPLOAD_PATH}/{wc:$shopEasy['thumb']}" class="zx-jx-img">
      </div></a>

    </div>
  </div>
</div>

<div class="goods-nav">
  <ul>
   <li class="nav-border current">全部商品</li>
   <li class="nav-border">最易中奖</li>
   <li>购买最多</li>
 </ul>
</div>

<div class="goods-list">
 <!--全部商品开始-->
 <ul class="goods-list-0">
  {wc:loop $shoplistAll $shoplist}
  <li>
    <a href="{WEB_PATH}/mobile/mobile/item/{wc:$shoplist['id']}">
      <img src="{G_UPLOAD_PATH}/{wc:$shoplist['thumb']}" class="goods-img"><br />
      <span class="goods-name">{wc:$shoplist['title']}</span>
      <div class="bar-out"><div class="bar-in"></div></div>
      <div class="goods-num">
        <span class="goods-zx">总需：{wc:$shoplist['zongrenshu']}</span>
        <span class="goods-sy">剩余：{wc:$shoplist['zongrenshu']-$shoplist['canyurenshu']}</span>
      </div>
     </a>     
      <img src="{G_TEMPLATES_IMAGE}/wx/add.png" class="add-gwc" data-shopid="{wc:$shoplist['id']}">
    </li>
    {wc:loop:end}
    <div style="clear:both;"></div>
    <div class="goods-more">加载更多</div>
  </ul>
  <!--全部商品结束-->
  <!--最易中奖开始-->
  <ul class="goods-list-1">
   {wc:loop $shoplistEasy $shoplist}
   <li>
    <a href="{WEB_PATH}/mobile/mobile/item/{wc:$shoplist['id']}">
      <img src="{G_UPLOAD_PATH}/{wc:$shoplist['thumb']}" class="goods-img"><br />
      <span class="goods-name">{wc:$shoplist['title']}</span>
      <div class="bar-out"><div class="bar-in"></div></div>
      <div class="goods-num">
        <span class="goods-zx">总需：{wc:$shoplist['zongrenshu']}</span>
        <span class="goods-sy">剩余：{wc:$shoplist['zongrenshu']-$shoplist['canyurenshu']}</span>
      </div></a>
      <img src="{G_TEMPLATES_IMAGE}/wx/add.png" class="add-gwc" data-shopid="{wc:$shoplist['id']}">
    </li>
    {wc:loop:end}
  </ul>
  <!--最易中奖结束-->
  <!--购买最多开始-->
  <ul class="goods-list-2">
   {wc:loop $shoplistResidue $shoplist}
   <li>
    <a href="{WEB_PATH}/mobile/mobile/item/{wc:$shoplist['id']}">
      <img src="{G_UPLOAD_PATH}/{wc:$shoplist['thumb']}" class="goods-img"><br />
      <span class="goods-name">{wc:$shoplist['title']}</span>
      <div class="bar-out"><div class="bar-in"></div></div>
      <div class="goods-num">
        <span class="goods-zx">总需：{wc:$shoplist['zongrenshu']}</span>
        <span class="goods-sy">剩余：{wc:$shoplist['zongrenshu']-$shoplist['canyurenshu']}</span>
      </div></a>
      <img src="{G_TEMPLATES_IMAGE}/wx/add.png" class="add-gwc" data-shopid="{wc:$shoplist['id']}">
    </li>
    {wc:loop:end}

  </ul>
  <!--购买最多结束-->
</div>
{wc:templates "mobile/index","footer"}   
<script>

  $(document).ready(function() {
    $(".swiper-container").height(document.documentElement.clientWidth/2.4)
    $(".swiper-container img").height(document.documentElement.clientWidth/2.4);
    for(var i=0;i<2;i++){
     var zxName=$(".zx-jx-name").eq(i).text();
     var str=zxName.substr(0,12)+"...";
     $(".zx-jx-name").eq(i).text(str)
   }
   var page=0;
   var sw = 0;
   showDiv(sw);
   $(".goods-nav ul li").click(function(){
     page=0;
     sw=$(".goods-nav ul li").index(this);
     showDiv(sw);
   })
   
   function showDiv(num){
     $(".goods-nav ul li").eq(sw).attr("style","color:#F85556;").siblings(".goods-nav ul li").attr("style","");
     $(".goods-list-"+num).attr("style","display:block").siblings("ul").attr("style","display:none");	
   }
   $(".goods-more").click(function(){
     var sw=$(".goods-more").index(this);
     page++;
     $.post("",{'page':page},function(data){
      $(".goods-list-"+sw+" li").append(data);
    })
   })
 });
</script>

<!--加入购物车-->
<script type="text/javascript">
  var Gobal = new Object();
  Gobal.Skin="{G_TEMPLATES_STYLE}";  
  Gobal.Webpath = "{WEB_PATH}";
var l = function(r,p) {
    //alert(r);
        GetJPData(Gobal.Webpath, "ajax", "addShopCart/" + p + "/" + 1,           
            function(s) {
                if (s.code == 0) {
                    if (r == 0) {
                        addNumToCartFun(s.num);
                        h("添加成功")
                    } else {
                       
                        location.href = Gobal.Webpath+"/mobile/cart/cartlist"
                    }
                } else {
                    if (r == 0) {
                        d("添加失败")
                    } else {
                        d("添加失败，请重试")
                    }
                }
            })
        };

  $('.add-gwc').on('click', function () {
    
    var cart = $('.shopping-cart');
    id=$(this).data('shopid');

    var imgtodrag = $(this).parent('.goods-list ul li').find('img').eq(0);
    if (imgtodrag) {
     var imgclone = imgtodrag.clone().offset({
      top: imgtodrag.offset().top,
      left: imgtodrag.offset().left
    }).css({
      'opacity': '0.5',
      'position': 'absolute',
      'height': '150px',
      'width': '150px',
      'z-index': '100'
    }).appendTo($('body')).animate({
      'top': cart.offset().top + 10,
      'left': cart.offset().left + 10,
      'width': 75,
      'height': 75
    }, 1000, 'easeInOutExpo');
    setTimeout(function () {
      cart.effect('shake', { times: 2 }, 200);
    }, 1500);
    imgclone.animate({
      'width': 0,
      'height': 0,
    }, function () {
      $(this).detach();
    });
  }
  l(0,id);
});
</script>
<script>
  var len=$(".goods-list li").length;
  var out=$(".bar-out").width();
  for(var i=0;i<len;i++)
  {
   var sy=$(".goods-sy").eq(i).text();
   var syNum=parseInt(sy.replace("剩余：",""));
   var zx=$(".goods-zx").eq(i).text();
   var zxNum=parseInt(zx.replace("总需：",""));
   var ra=(zxNum-syNum)/zxNum;
   var w=out*ra;
   $(".bar-in").eq(i).width(w);
 }
</script>
</body>
</html>
